<template>
    <div id="questionnairePage">
        <el-row class = "top_box">
            <el-col :span="2">
            <el-button style="border-radius:20px;margin:5px 0px 0px 30px;box-shadow:0px 0px 20px #9370DB" @click="toIndex()"><i class="el-icon-caret-left" />首页</el-button>
            </el-col>
            <el-col :span="20" style="font-size:28px;letter-spacing:10px;color:#fbf8ff;text-align:center;margin-top:5px">
                创建问卷
            </el-col>
            <el-col :span="2">
            <el-avatar :size="50" style="font-size:30px;box-shadow:0px 0px 20px #9370DB" icon="el-icon-user-solid"></el-avatar>
            </el-col>
        </el-row>
        <el-row style="padding-top:100px">
            <el-col :span="4">
                <div v-if="preview">
                    <el-button style="border-radius:20px;margin:30px 0px 0px 0px" @click="toBaseInfo()"><i class="el-icon-caret-left" />上一步</el-button>
                </div>
                <div style="height:450px;margin:80px 0px 0px 100px">
                <el-steps direction="vertical" :active="activeStep">
                    <el-step title="填写基本信息"></el-step>
                    <el-step title="添加问题"></el-step>
                    <el-step title="提交"></el-step>
                </el-steps>
                </div>
            </el-col>

            <!-- 基本信息 -->
            <el-col :span="18" v-if="baseInfo">
                <main style="height:900px;width:70%;margin-left:auto;margin-right:auto">
                <p style="width:80%;font-size:24px;font-weight:500; color:#9260b0;margin-bottom:40px">
                    基本信息
                </p>
                <createForm :form="form" ref="formRef">
                    <el-form-item style="width:80%">
                    <el-button type="primary" @click="onSubmit" style="font-size:20px">提&thinsp;交</el-button>
                    </el-form-item>
                </createForm>
                </main>
            </el-col>

            <!-- 单选题对话框 -->
            <choiceDialog 
            title="添加单选题"
            :visible.sync="dialogVisible_0"
            @close="dialogClose"
            :questionList="questionList"
            @addQuestion="addQuestionTest" 
            />

            <!-- 修改单选题对话框 -->
            <el-dialog
            title="修改单选题"
            :visible.sync="editDialogVisible_0"
            width="50%"
            @close="editDialogClosed">
                <el-form ref="editRef" :model="editting" label-width="120px" style="padding-right:40px">
                    <el-form-item 
                        label="题目" 
                        prop="title"
                    >
                        <el-input v-model="editting.title" :placeholder="editting.title"></el-input>
                    </el-form-item>
                    <el-form-item
                        v-for="(option, index) in editting.options"
                        :label="'选项' + index"
                        :key="option.index"
                        :prop="option.value"
                        :rules="[{
                        required: true, message: '选项不能为空', trigger: 'blur'
                        },{min: 1, max:30, message: '选项长度在1-30之间', trigger: 'blur'
                        }]"
                    >
                        <el-input style="width:80%;float:left" v-model="editting.options[index]" :placeholder="editting.options[index]"></el-input>
                        <el-button type="danger" style="width:13%;float:right" @click.prevent="editRemoveOption(option)">删除</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button style="width:80%;float:left;border:2px dashed #DCDFE6" @click="editAddOption">+添加选项</el-button>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="cancelEdit">取 消</el-button>
                    <el-button type="primary" @click="editQuestionCheck">确 定</el-button>
                </span>
            </el-dialog>

            <!-- 多选题对话框 -->
            <multiChoiceDialog 
            title="添加多选题"
            :visible.sync="dialogVisible_1"
            @close="dialogClose"
            :questionList="questionList"
            @addQuestion="addQuestionTest2" 
            />

            <!-- 修改多选题对话框 -->
            <el-dialog
            title="修改多选题"
            :visible.sync="editDialogVisible_1"
            width="50%"
            @close="editDialogClosed1">
                <el-form ref="editRef1" :model="editting" label-width="120px" style="padding-right:40px">
                    <el-form-item 
                        label="题目" 
                        prop="title"
                    >
                        <el-input v-model="editting.title"></el-input>
                    </el-form-item>
                    <el-form-item
                        v-for="(option, index) in editting.options"
                        :label="'选项' + index"
                        :key="option.index"
                        :prop="option.value"
                        :rules="[{
                        required: true, message: '选项不能为空', trigger: 'blur'
                        },{min: 1, max:30, message: '选项长度在1-30之间', trigger: 'blur'
                        }]"
                    >
                        <el-input style="width:80%;float:left"  v-model="editting.options[index]" :placeholder="editting.options[index]" ></el-input>
                        <el-button type="danger" style="width:13%;float:right" @click.prevent="editRemoveOption(option)">删除</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button style="width:80%;float:left;border:2px dashed #DCDFE6" @click="editAddOption">+添加选项</el-button>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="cancelEdit">取 消</el-button>
                    <el-button type="primary" @click="editQuestionCheck1">确 定</el-button>
                </span>
            </el-dialog>

            <!-- 级联选择题对话框 -->
            <cascadeDialog
            title="添加级联选择题"
            :visible.sync="dialogVisible_3"
            @close="dialogClose"
            :questionList="questionList"
            @addQuestion="addQuestionTest4" 
            ></cascadeDialog>

            <!-- 文字题对话框 -->
            <textDialog 
            title="添加文字题"
            :visible.sync="dialogVisible_2"
            @close="dialogClose"
            :questionList="questionList"
            @addQuestion="addQuestionTest3" 
            />

            <!-- 修改文字题对话框 -->
            <el-dialog
            title="修改文字题目"
            :visible.sync="editDialogVisible_2"
            width="50%"
            @close="editDialogClosed2">
                <el-form ref="editRef2" :model="editting" :rules="addQuestionRules" label-width="120px" style="padding-right:40px">
                    <el-form-item 
                        label="题目" 
                        prop="title"
                    >
                        <el-input v-model="editting.title" :placeholder="editting.title"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="editDialogVisible_2 = false">取 消</el-button>
                    <el-button type="primary" @click="editQuestionCheck2">确 定</el-button>
                </span>
            </el-dialog>

            <!-- 修改分节符对话框 -->
            <el-dialog
            title="编辑分节符"
            :visible.sync="editDialogVisible_3"
            width="50%"
            @close="editDialogClosed3">
                <el-form ref="editRef3" :model="editting" :rules="addQuestionRules" label-width="120px" style="padding-right:40px">
                    <el-form-item 
                        label="分节符标题" 
                        prop="title"
                    >
                        <el-input v-model="editting.title" :placeholder="editting.title"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="editDialogVisible_3 = false">取 消</el-button>
                    <el-button type="primary" @click="editQuestionCheck3">确 定</el-button>
                </span>
            </el-dialog>

            <!-- 预览 -->
            <el-col :span="18" v-if="preview">
                <div style="padding-left:80px">
                <el-button-group style="box-shadow:5px 5px 10px #8673a5c4;margin-right:auto;margin-left:auto;margin-top:30px">
                    <el-button style="border-radius:0px;font-size:18px" type="primary" @click="addQuestion">+单选题</el-button>
                    <el-button style="border-radius:0px;font-size:18px" type="success" @click="addQuestion1">+多选题</el-button>
                    <el-button style="border-radius:0px;font-size:18px" type="warning" @click="addQuestion2">+文字题</el-button>
                    <el-button style="border-radius:0px;font-size:18px" type="info" @click="addQuestion3">+级联选择题</el-button>
                    <el-button style="border-radius:0px;font-size:18px" type="danger" @click="addRate">+用户评分</el-button>
                    <el-button style="border-radius:0px;font-size:18px;margin-left:20px;border:1px solid rgb(162, 143, 202);color:rgb(162, 143, 202)" @click="addDivider()">+分节符</el-button>
                </el-button-group> 
                <el-container style="display:table" class="preview" >
                    
                    <div style="margin-top:30px;margin-bottom:40px;margin-right:30px;margin-left:30px;text-align:left;box-shadow:5px 5px 10px #8673a542;padding:10px 10px 20px 20px;background-color:#ffffff67" 
                    v-for="(question, index) in questionList" 
                    v-bind:key="index"
                    draggable="true" 
                    @dragstart="handleDragStart($event, question)"
                    @dragover.prevent="handleDragOver($event, question)"
                    @dragenter="handleDragEnter($event, question)"
                    @dragend="handleDragEnd($event, question)"
                    @click="chooseNav(question)"
                    >
                        <div v-if="question.type!='分节符'">
                            <p style="font-size:18px;font-weight:bold;float:left">第{{question.no}}题：（{{question.type}}）{{question.title}}</p>
                        </div>
                        <div v-if="question.type=='分节符'"><p style="text-align:center;font-size:24px;float:left;color:rgb(162, 143, 202)">{{question.title}}</p></div>
                        <div style="text-align:right;margin-right:20px;margin-top:20px">
                            <el-button type="text" @click="editItem(question.type, index)"><i style="font-size:20px" class="el-icon-edit"/></el-button>
                            <el-button type="text" @click="deleteItem(index)"><i style="font-size:20px" class="el-icon-delete"/></el-button>
                        </div>
                        <el-select style="width:40%;margin-right:350px;margin-bottom:10px;float:none" v-if="(question.type=='单选')" placeholder="请选择" v-model="questionListItem.title">
                            <div v-for="(option, n) in question.options" v-bind:key="n">
                            <el-option :label= "option" :value= "option"></el-option>
                            </div>
                        </el-select >

                        <el-checkbox-group style="width:40%;margin-right:30px;margin-bottom:10px;float:none" v-if="(question.type=='多选')" v-model="questionListItem.options">
                            <div v-for="(option, m) in question.options" v-bind:key="m" >
                            <el-checkbox 
                            :label= "option"
                            ></el-checkbox>
                            </div>
                        </el-checkbox-group>

                        <el-input style="width:95%;margin-bottom:10px;float:none" v-if="(question.type=='文字题')" type="textarea"></el-input>

                        <div style="margin-right:350px;margin-bottom:10px;float:none" v-if="(question.type=='级联')">
                            <el-cascader
                            v-model="value"
                            :options="questionList[index].options"
                            @change="handleChange"
                            ></el-cascader>
                        </div >
                        
                    </div>
                    <div v-if="rate" style="margin-bottom:30px">
                        <p style="font-size:18px">本次答题体验：</p>
                        <el-rate
                        style="margin-bottom:10px"
                            :max="10"
                            :low-threshold="4"
                            :high-threshold="8"
                            :texts="['极差', '极差', '失望', '失望', '一般', '一般', '满意', '满意', '惊喜', '惊喜']"
                            show-text>
                        </el-rate>
                        <el-button style="font-size:16px" type="danger" @click="deleteRate">删除</el-button>
                    </div>
                </el-container>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import createForm from './myComponents/form/createForm'
import choiceDialog from './myComponents/dialog/choiceDialog'
import multiChoiceDialog from './myComponents/dialog/multiChoiceDialog'
import cascadeDialog from './myComponents/dialog/cascadeDialog'
import textDialog from './myComponents/dialog/textDialog'

let allMyModels = []
let mid
export default{
    name: 'UseModel',
    components: {
        createForm,choiceDialog,multiChoiceDialog,textDialog,cascadeDialog
    },
    props: {
    },
    data() {
        return {
            activeStep: 0, //步骤条进行中元素
            baseInfo: true, //基础信息板块
            preview: false, //预览模块
            allMyModels,
            mid, //使用的模板id
            form: {
                name: '',
                start_date: '',
                start_time: '',
                end_date: '',
                end_time: '',
                public: '', //公开 非公开
                anonymous: '', //记名 匿名
                remind: [],
                desc: '',
                in_script: false
            },

            //预览问题列表
            questionList: [], 
            
            //正在修改
            editting: {
                type: '',
                title: '',
                options: [],
                no: ''
            },
            edittingIndex: -1,

            questionListItem: {
                type: '',
                title: '',
                options: []
            },
            
            //对话框：添加问题
            dialogVisible_0: false,
            dialogVisible_1: false,
            dialogVisible_2: false,
            dialogVisible_3: false,

            //对话框：修改问题
            editDialogVisible_0: false,
            editDialogVisible_1: false,
            editDialogVisible_2: false,
            editDialogVisible_3: false,
            
            //添加单/多选题的表单
            questionForm: {
                options: [{
                    value: ''
                }],
                title: ''
            },
            
            //添加问题验证
            addQuestionRules: {
                title: [{
                    required: true, message: '请输入问题', trigger: 'blur'
                },{
                    min: 2, max:40, message: '问题长度在2-40之间', trigger: 'blur'
                }],
            },
            dragging: null,
            rate: false //打分
        }
    },

    methods:{

        addQuestionTest: function(temp){ //新建单选
            let qnum = 0
            if(this.questionList){
                if (this.questionList.length!=0){
                    this.questionList.forEach(element =>{
                        if(element.type!="分节符"){
                            qnum++
                        }
                    })
                }
            }
            temp.type = '单选'
            temp.no = qnum+1 //no:题号
            this.questionList.push(temp)
        },

        addQuestionTest2: function(temp){ //新建多选
            let qnum = 0
            if(this.questionList){
                if (this.questionList.length!=0){
                    this.questionList.forEach(element =>{
                        if(element.type!="分节符"){
                            qnum++
                        }
                    })
                }
            }
            temp.type = '多选'
            temp.no = qnum+1 //no:题号
            this.questionList.push(temp)
        },

        addQuestionTest3: function(temp){ //新建文字题
            let qnum = 0
            if(this.questionList){
                if (this.questionList.length!=0){
                    this.questionList.forEach(element =>{
                        if(element.type!="分节符"){
                            qnum++
                        }
                    })
                }
            }
            temp.type = '文字题'
            temp.no = qnum+1 //no:题号
            this.questionList.push(temp)
        },

        addQuestionTest4: function(temp){
            // 新建级联选择题
            let qnum = 0
            if(this.questionList){
                if (this.questionList.length!=0){
                    this.questionList.forEach(element =>{
                        if(element.type!="分节符"){
                            qnum++
                        }
                    })
                }
            }
            temp.type = '级联'
            temp.no = qnum+1 //no:题号
            this.questionList.push(temp)
        },

        dialogClose: function(){
            this.dialogVisible_0 = false
            this.dialogVisible_1 = false
            this.dialogVisible_3 = false
            this.dialogVisible_3 = false
        },

        //立即创建按钮
        onSubmit: function(){
            this.preview = true
            this.baseInfo = false
            this.activeStep = 1
        },
        
        //返回上一步按钮
        toBaseInfo: function(){
            this.preview = false
            this.baseInfo = true
            this.activeStep = 0
        },

        addQuestion: function(){
            this.dialogVisible_0 = true
        },
        addQuestion1: function(){
            this.dialogVisible_1 = true
        },
        addQuestion2: function(){
            this.dialogVisible_2 = true
        },
        addQuestion3: function(){
            this.dialogVisible_3 = true
        },
        addRate: function(){
            this.rate = true
        },
        deleteRate:function(){
            this.rate = false
        },
        //回首页
        toIndex: function () {
            this.$router.push({path: '/admin'})
        },

        //修改问题的dialog删除选项按钮
        editRemoveOption: function(item) {
        var index = this.editting.options.indexOf(item)
        if (index !== -1) {
          this.editting.options.splice(index, 1)
        }
        },

        //修改问题的dialog的添加选项按钮
        editAddOption: function(){
            this.editting.options.push("");
        },

        //监听对话框的关闭事件
        editDialogClosed: function() {//单选编辑
            this.$refs.editRef.resetFields()
        },
        editDialogClosed1: function() {//多选编辑
            this.$refs.editRef1.resetFields()
        },
        editDialogClosed2: function() {//文字编辑
            this.$refs.editRef2.resetFields()
        },
        editDialogClosed3: function() {//分节符编辑
            this.$refs.editRef3.resetFields()
        },

        //编辑问题的取消按钮
        cancelEdit: function(){
            let blank = {
                        type: '',
                        title: '',
                        options: []
                    }
            this.editting = blank
            this.editDialogVisible_0 = false
            this.editDialogVisible_1 = false
            this.editDialogVisible_2 = false
            this.editDialogVisible_3 = false
        },

        //修改单选题的确定按钮
        editQuestionCheck: function(){
            this.$refs.editRef.validate(valid => {
                if(!valid){
                    return
                }
                else {
                    let temp = {type:'单选', title:'', options:[], no:''}
                    temp.title += this.editting.title
                    temp.no += this.editting.no
                    this.editting.options.forEach(element => {
                        temp.options.push(element)
                    })
                    this.questionList.splice(this.edittingIndex,1,temp)

                    console.log("修改后的选项："+this.questionList[this.edittingIndex].options)
                    this.editDialogVisible_0 = false

                    //清空editting
                    let blank = {
                        type: '',
                        title: '',
                        options: []
                    }
                    this.editting = blank
                    this.edittingIndex = -1
                }
            })
        },

        //修改多选题的确定按钮
        editQuestionCheck1: function() {
            this.$refs.editRef1.validate(valid => {
                if(!valid){
                    return
                }
                else {
                    let temp = {type:'多选', title:'', options:[], no:''}
                    temp.title += this.editting.title
                    temp.no += this.editting.no
                    this.editting.options.forEach(element => {
                        temp.options.push(element)
                    })
                    this.questionList.splice(this.edittingIndex,1,temp)

                    console.log("修改后的选项："+this.questionList[this.edittingIndex].options)
                    this.editDialogVisible_1 = false

                    //清空editting
                    let blank = {
                        type: '',
                        title: '',
                        options: []
                    }
                    this.editting = blank
                    this.edittingIndex = -1
                }
            })
        },

        //修改文字题的确定按钮
        editQuestionCheck2: function() {
            //校验格式
            this.$refs.editRef2.validate(valid => {
                if(!valid){
                    return
                }
                else {
                    let temp = {type:'文字题', title:'', no:''}
                    temp.title += this.editting.title
                    temp.no += this.editting.no
                    this.questionList.splice(this.edittingIndex,1,temp)
                    this.editDialogVisible_2 = false

                    //清空editting
                    let blank = {
                        type: '',
                        title: '',
                        options: [{value:''}]
                    }
                    this.editting = blank
                    this.edittingIndex = -1
                }
            })
        },

        //修改分节符的确定按钮
        editQuestionCheck3: function() {
            //校验格式
            this.$refs.editRef3.validate(valid => {
                if(!valid){
                    return
                }
                else {
                    let temp = {type:'分节符', title:''}
                    temp.title += this.editting.title
                    this.questionList.splice(this.edittingIndex,1,temp)
                    this.editDialogVisible_3 = false

                    //清空editting
                    let blank = {
                        type: '',
                        title: '',
                        options: [{value:''}]
                    }
                    this.editting = blank
                    this.edittingIndex = -1
                }
            })
        },

        //添加分节符按钮
        addDivider: function() {
            let temp = {
                type: "分节符",
                title: '我是分节符',
                // options: []
            }
            this.questionList.push(temp)
        },

        //预览框的删除按钮
        deleteItem: function(index) {
            this.questionList.splice(index,1)
            let len = this.questionList.length
            for(let i=index;i<len;i++){
                this.questionList[i].no--
            }
        },

        //预览框的编辑按钮
        editItem: function(type, index) {
            
            this.editting.type = this.questionList[index].type
            this.editting.title = this.questionList[index].title
            if(this.questionList[index].no){
                this.editting.no = this.questionList[index].no
            }
            if(this.questionList[index].options!=null){
                this.questionList[index].options.forEach(element => {
                    this.editting.options.push(element)
                })
                console.log(this.editting.options)
            }
            this.edittingIndex = index

            switch (type) {
                case '单选':
                    console.log("test")
                    this.editDialogVisible_0 = true
                    break;
                
                case '多选':
                    this.editDialogVisible_1 = true
                    break;
            
                case '文字题':
                    this.editDialogVisible_2 = true
                    break;
                
                case '分节符':
                    this.editDialogVisible_3 = true
                    break;
            
                default:
                    break;
            }
            
        },
        
        getData: function(){
            return this.questionList
        },

        //拖拽事件处理函数
        handleDragStart(e, question) {
            this.dragging = question;
        },
        handleDragEnd() {
            this.dragging = null;
            this.$emit('hasChanged', this.questionList);
        },
        //重写dragenter/dragover
        handleDragOver(e) {
            e.dataTransfer.dropEffect = 'move';
        },
        handleDragEnter(e, question) {
            if (this.dragging) {
                e.dataTransfer.effectAllowed = 'move';// 为需要移动的元素设置dragstart事件
                if (question === this.dragging) {
                    return;
                }
                const newQuestionList = [...this.questionList];
                // console.log(newQuestionList);
                const src = newQuestionList.indexOf(this.dragging); //被拖拽对象的索引
                const dst = newQuestionList.indexOf(question); //目标的索引
                if(this.dragging.type!="分节符"){ //被拖的是题
                    if(question.type!="分节符"){ //题号交换
                        let temp = this.dragging.no
                        this.dragging.no = question.no
                        question.no = temp;
                    }
                }
                newQuestionList.splice(dst, 0, ...newQuestionList.splice(src, 1));
                this.questionList = newQuestionList;
            }
        },
        chooseNav(val) {
            this.$emit('selectItem', val);
        },
        
        //用model给form赋值
        setModelId: function(){
            mid = this.$route.query.model_id
            console.log("MID:"+mid)

            this.$http.post('/getModel', {
                params:{
                    model_id: mid
                }
            }).then(res => {
            console.log(res.data.data)
            if (res.data.message=='success') {  
                this.questionList = res.data.data.questions
                this.form = res.data.data
            } else {
                return
            }
            })
        }
    },

    mounted : function(){
        let _this = this;
        setTimeout(function() {
            _this.setModelId()
        }, 100)
    }
}
</script>


<style>

#questionnairePage {
    background: url("../pics/purple5.png");
    background-size: 100% 100%;
    height: 100%;
    background-attachment: fixed;
}

/* 表单label字体 */
label.el-form-item__label {
    font-size: 18px;
    font-weight:bold;
}

/* 多选选项的字体 */
.el-checkbox__label {
    display: inline-block;
    padding-left: 10px;
    line-height: 19px;
    font-size: 18px;
}

/* 多选选项的勾选框 */
.el-checkbox__inner {
    border: 1px solid #ac7cc9;
    width: 18px;
    height: 18px;
}
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #ac7cc9;
    border-color: #ac7cc9;
}
.el-checkbox__input.is-checked+.el-checkbox__label {
    color: #9260b0;
}

.el-select {
    float: left;
}
.el-checkbox-group {
    float: left;
}
.el-switch {
    float: left;
    margin-top: 10px;
}
element.style {
    width: 130px;
}

/* 分割线 */
.el-divider--horizontal {
    display: block;
    height: 2px;
    width: 100%;
    margin: 24px 20px 30px 24px;
}

.question_text{
    font-size:20px;
}

.el-switch__core {
    border: 1px solid #FFF;
}
</style>